<template>
  <div class="sidebar">
    <el-menu
      :collapse="this.$store.getters.isCollapse"
      :default-active="onRoutes"
      background-color="#324157"
      text-color="#bfcbd9"
      active-text-color="#20a0ff"
      router
      collapse-transition:false
      unique-opened
    >
     <template v-for="item in this.$store.getters.permission_routers">
        <template  v-if="!item.hidden&&item.children">
        <!-- 一级菜单循环 -->
          <el-submenu :index="item.path" :key="item.index">
            <template slot="title">
                <i :class=" 'iconfont' + ' ' + item.meta.icon"></i>
                <span slot="title">{{ item.name }}</span>
            </template>
            <!-- 二级菜单循环 -->
            <el-menu-item v-for="(subItem,index) in item.children" :index="subItem.path" :key="index" >
              <template slot="title">
                <i :class=" 'iconfont' + ' ' + subItem.meta.icon"></i>
                <span>{{ subItem.name }}</span>
              </template>
             </el-menu-item>
         </el-submenu>
        </template>
     </template>
   </el-menu>
  </div>
</template>
<script>
import { mapGetters } from "vuex";
export default {
  data() {
    return {
    };
  },
  computed: {
    ...mapGetters(["permission_routers","isCollapse"]),
    onRoutes() {
      return this.$route.path;
    }
  },
  created() {
    console.log(this.$store.getters.isCollapse,'isCollapse')
  },
  mounted() {
    console.log(this.$store.getters.permission_routers, "permission_routers");
  },
};
</script>
<style lang="less" scoped>
.sidebar {
  display: block;
  position: absolute;
  left: 0;
  top: 70px;
  bottom: 0;
  background-color: #304156;
  z-index: 1001;
  max-height: 100%;
  overflow-y: auto;
.iconfont  {
 padding-right: 10px;
}

.el-submenu .el-menu-item {
  min-width: 100px;
}
.el-submenu .is-active .is-opened {
  min-width: 100px!important;
}
}
.el-menu:not(.el-menu--collapse) {
    width: 250px;
}

.el-menu--collapse {
    width: 64px;
}


</style>
